import React, { Component } from 'react';
import { Card  ,Button  } from 'antd';
import { connect } from 'dva';
import { Table, Divider, Tag } from 'antd';
const namespace = 'listimages';
const ButtonGroup = Button.Group;
const columns = [
  {
    title: 'Name',
    dataIndex: 'name',
    key: 'name',
    render: text => <a>{text}</a>,
  },
  {
    title: 'url',
    dataIndex: 'url',
    key: 'url',
  },
  {
    title: 'Action',
    key: 'action',
    render: (text, record) => (
      <span>
        <Button type='primary'>View</Button>
        <Divider type="vertical" />
        <Button type='primary'>Delete</Button>
      </span>
    ),
  },
];

const data = [
  {
    id: '1',
    name: 'John Brown',
    url: 'www.baidu.com',
    description: 'New York No. 1 Lake Park',
    tags: ['nice', 'developer'],
  },
  {
    id: '2',
    name: 'Jim Green',
    url: 42,
    description: 'London No. 1 Lake Park',
    tags: ['loser'],
  },
  {
    id: '3',
    name: 'Joe Black',
    url: 32,
    description: 'Sidney No. 1 Lake Park',
    tags: ['cool', 'teacher'],
  },
    {
    id: '4',
    name: 'Joe Black',
    url: 56,
    description: 'Sidney No. 1 Lake Park',
    tags: ['cool', 'teacher'],
  },
];

const mapStateToProps = (state) => {
  const cardList = state[namespace].data;
  return {
    cardList,
  };
};

const mapDispatchToProps = (dispatch) => {
  return {
    onDidMount: () => {
      dispatch({
        type: `${namespace}/listImage`,
        payload: {'ddd':"ddddd"},
      });
    },
  };
};

@connect(mapStateToProps, mapDispatchToProps)
export default class PuzzleCardsPage1 extends Component {
  componentDidMount() {
    this.props.onDidMount();
  }
  render() {
    return (
      <div>            
		<Table columns={columns} dataSource={this.props.cardList} />
      </div>
    );
  }
}